<template>
    <div class="content">
        <div class="search-box">
            <m-cb-input type="search"
                        @doAction="search"
                        ref="input"
                        with-button
                        del>
                <span>搜索</span>
            </m-cb-input>
        </div>
        <phone-card
                v-for="item in searchRes"
                :key="item.docId"
                :data-key="item.docId"
                @click.native.capture="showDetails">
            <div slot="title" class="pcard-title">{{item.name}}</div>
            <div slot="description" class="pcard-des">
                <div v-html="item.highLightedContent" class="pcard-content"></div>
            </div>
        </phone-card>


    </div>
</template>

<script>
    import phoneCard from "../components/ui/phoneCard";
    import MCbInput from "../components/ui/m-cbInput";
    import {mapActions, mapGetters, mapMutations} from "vuex";

    export default {
        name: "phone-home-search",
        components: {phoneCard, MCbInput},
        data() {

            return {
                searchName: this.$route.query.searchName,
                displaySearchList: false,
                searchRes: [],
                currentPage: 1,
                pageSize: 7,
                minPage: 1,
                maxPage: 1,
                space: 1,
                startTime: null,
                endTime: null,
                direction: "DESC",
            };
        },
        async mounted() {
            this.set_files({});
            this.$refs.input.content = this.$route.query.searchName;
            await this.search();
            this.maxPage = this.minPage + this.files.length / this.pageSize;
            this.searchRes = this.files;
            console.log(this.files);
        },
        computed: {
            ...mapGetters([
                "files"
            ])
        },
        methods: {
            ...mapMutations([
                "set_files"
            ]),
            ...mapActions([
                "get_files",
                "search_files"
            ]),
            search: function () {
                console.log("content:" + this.$refs.input.content);
                console.log("res:" + this.displaySearchList);
                console.log("startTime?" + this.startTime == null);
                console.log("endTime?" + this.endTime == null);
                console.log("正在搜索:" + this.searchName);
                let _this = this;
                if (this.$refs.input.content !== "") {
                    let QueryBody = {
                        "pageNum": 10,
                        "currentPage": _this.currentPage,
                        "currentPageSize": _this.pageSize,
                    };
                    QueryBody.filter = {
                        "date": {
                            "startDate": _this.startTime == null ? 0 : _this.startTime.valueOf(),
                            "endDate": _this.endTime == null ? 0 : _this.endTime.valueOf()
                        },
                        "content": this.$refs.input.content
                    };
                    QueryBody.sorter = {
                        "date": _this.direction,
                    };
                    console.log("QueryBody", QueryBody);
                    this.search_files(QueryBody).then(() => {
                        _this.searchRes = _this.files;
                        _this.displaySearchList = true;
                        console.log(this.searchRes);
                        console.log("content不为空");
                    });
                } else {
                    console.log("content为空");
                }

            },
            showDetails(e) {
                console.log(e.target);
                let pKey = e.target.getAttribute("data-key");
                console.log("pkey" + pKey);
                let routeData = this.$router.resolve({
                    path: `/fileDetails`,
                    query: {pKey: pKey}
                });
                window.open(routeData.href, "_blank");
            }
        }

    };
</script>

<style scoped>
    @import "../../src/assets/styles/wrapper.css";

    .content {
        background-color: rgba(0, 0, 0, 0.03);
        height: fit-content;
    }

    .search-box {
        margin-top: 3%;
        margin-bottom: 5%;
    }

    .title-box {
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.5rem;
        margin-top: 50%;
    }

    .input-box {
        height: 100%;
        width: 100%;
    }

    .input1 {
        width: 90%;
        height: 10%;
        margin-left: 15%;
        padding-bottom: 4%;
        font-size: 2.5rem;
        outline: none;
        border: 2px solid #c4c7ce;


    }

    .button1 {
        outline: none;
        border: 0;
        box-sizing: border-box;
        min-width: 5rem;
        height: 5.5rem;
        color: white;
        font-size: 2.5rem;
        font-family: sans-serif;
        width: 60%;
        margin-left: 9%;
        border-radius: 0 5px 5px 0;
        vertical-align: middle;
        cursor: pointer;
        background-color: #4E6EF2;
    }

    .input-div {
        display: inline-block;
        height: 100%;
        width: 60%;
    }

    .button-div {
        width: 40%;
        display: inline-block;
        height: 100%
    }

    .button1 :hover {
        background-color: #4662D9;
    }

    .input1:focus {
        border-color: #4E6EF2;
    }

    .input1:hover {
        border-color: #A7AAB5;
    }

    .pcard-title {
        height: fit-content;
        font-size: 40px;
        font-weight: 400;
        color: #4662D9;
        margin: 8px 24px;
        pointer-events: none;
    }

    .pcard-des {
        min-height: 340px;
        font-size: 36px;
        margin: 8px 24px 16px 24px;
        pointer-events: none;
    }

    .pcard-content {
        height: 100%;
        width: 100%;
    }

</style>
